<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品详情</title>
    <link rel="stylesheet" href="/libs/big/css/magnifier.css">
    <link rel="stylesheet" href="/css/global.css">
    <link rel="stylesheet" href="/css/detail.css">
    <link rel="stylesheet" href="/libs/font_2130517_al4ov1s4jw4/iconfont.css">


</head>
<body>
<header></header>
<main>
    <!-- 面包屑导航 -->
    <div class="nav_bar">
        <div class="wrap ban">
            <a href="/">首页</a>
            &gt; <a href="">双11专区 </a>
            &gt;<a href="">手机壳</a><a href="">主宰之力 手机壳 （iPhone）</a>
        </div>
    </div>

    <!--    商品详情-->
    <div class="goods_detail ban clearfix" id="goods_detail">

    </div>

    <script type="text/html" id="detailTemplate">

        <!--左侧图片区域-->
        <div class="goods_detail_pic clearfix">
            <div class="magnifier" id="magnifier1">
                <div class="magnifier-container">
                    <div class="images-cover"></div>
                    <!--当前图片显示容器-->
                    <div class="move-view"></div>
                    <!--跟随鼠标移动的盒子-->
                </div>
                <div class="magnifier-assembly">
                    <div class="magnifier-btn">
                        <span class="magnifier-btn-left">&lt;</span>
                        <span class="magnifier-btn-right">&gt;</span>
                    </div>
                    <!--按钮组-->
                    <div class="magnifier-line">
                        <ul class="clearfix animation03">
                            {{each photo pic}}
                            <li>
                                <div class="small-img">
                                    <img src="{{pic.url}}" />
                                </div>
                            </li>
                            {{/each}}
                        </ul>
                    </div>
                    <!--缩略图-->
                </div>
                <div class="magnifier-view"></div>
                <!--经过放大的图片显示容器-->
            </div>
        </div>

        <!--        右侧商品区域-->
        <div class="goods_detail_shop">
            <div class="list">
                <h3>{{title}}</h3>
                <p>{{qunTitle}}</p>
                <div class="underline"></div>
                <p id="productShowPrice" class="price">¥ {{price.toFixed(2)}}</p>
                <div class="underline"></div>
                <div class="send">
                    <p class="send_title">运费 :</p><em>上海 至</em><select>

                    {{each city send}}
                    <option>{{send}}</option>
                    {{/each}}
                </select><em>快递：￥{{originPrice}}</em>
                </div>
                <div class="buy_num">
                    <p class="send_title">数量 :</p>
                    <!--                    选择商品数量按钮-->
                    <div class="buy_num_btn">
                        <button id="delToCar">-</button>
                        <input value="1" id="checkCount">
                        <button id="addToCar">+</button>
                    </div>
                </div>
                <div class="buy_car">
                    <button>立即购买</button>
                    <button id="addCar-btn"><span class="iconfont icon-gouwucheman"></span>加入购物车</button>
                </div>
            </div>
        </div>
    </script>

    <!--商品介绍-->
    <div class="goods_produce ban clearfix">
        <!--        猜你喜欢-->
        <div class="goods_produce_left">
            <h3>猜你喜欢</h3>
            <ul id="youLike-ul">

            </ul>

            <script type="text/html" id="youLikeTemplate">
                {{each list like}}
                {{if like.title}}
                <li data-pid="{{like.id}}">
                <img src="{{like.image}}">
                    <p>{{like.title.slice(0,8)}}...</p>
                <span>￥{{like.price.toFixed(2)}}</span>
                </li>
                {{/if}}
                {{/each}}
            </script>
        </div>

        <!--        商品介绍-->
        <div class="goods_produce_right">
            <div class="goods_produce_right_title">
                <p>产品介绍</p>
                <div></div>
                <p>产品评论</p>
            </div>
            <div class="bigImg" id="bigImg">
            </div>
            <script type="text/html" id="bigImgTemplate">
                {{each descContentList bg}}
                <img src="{{bg.image.url}}">
                {{/each}}
            </script>
        </div>
    </div>
</main>
<footer></footer>
<script src="/libs/require/require.min.js" data-main="/js/detail"></script>
</body>
</html>